<template>
  <div>
    <el-row>
      <el-col :span="24" id="GoodsOrder1">
        <div id="GoodsOrder2">
          <el-button @click="showDialog" type="success" round>新增商品 </el-button>
        </div>
        <div style="height: 20px;"></div>
        <el-table :data="page.records" border>
          <el-table-column prop="goodsId" label="商品ID" width="115"></el-table-column>
          <el-table-column prop="goodsImage" label="商品图" width="130">
            <template #default="scope">
              <img :src="scope.row.goodsImage" alt="商品图" style="max-width: 110px; max-height: 110px">
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名" width="130"></el-table-column>
          <el-table-column prop="goodsPrice" label="商品单价" width="130"></el-table-column>
          <el-table-column prop="goodsNum" label="商品数量" width="130"></el-table-column>
          <el-table-column prop="goodsFrooze" label="商品冻结量" width="130"></el-table-column>
          <el-table-column prop="goodsState" label="类型状态" width="130">
            <template slot-scope="scope">
              <template v-if="scope.row.goodsState == 1">正常</template>
              <template v-if="scope.row.goodsState == 0">下架</template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button @click="disablegoods(scope.row.goodsId)" v-if="scope.row.goodsState == '1'" type="text"
                size="small">下架</el-button>
              <el-button @click="enabligoods(scope.row.goodsId)" v-if="scope.row.goodsState == '0'" type="text"
                size="small">上架</el-button>
              <el-button @click="updataGoodsImage(scope.row.goodsId)" type="text" size="small">上传图片</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total"></el-pagination>


        <el-dialog title="请输入商品信息" :visible.sync="showAddwindow" width="35%">
          商品名称：<el-input v-model="add.goodsName" placeholder="请输入商品名称" style="width: 50%;"></el-input><br>
          商品单价：<el-input-number v-model="add.goodsPrice" controls-position="right" :min="1"
            placeholder="请输入价格"></el-input-number><br>
          商品数量：<el-input-number v-model="add.goodsNum" controls-position="right" :min="1"
            placeholder="请输入数量"></el-input-number><br>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showAddwindow = false" type="danger" round>取 消</el-button>
            <el-button @click="addGoods()" type="success" round>确 认</el-button>
          </span>
        </el-dialog>


        <el-dialog title="修改商品图片" :visible.sync="updataGoodsImageDialog" width="35%">
          商品封面：
          <el-upload class="upload-demo" :data="uploadData" name="image" ref="upload"
            action="http://localhost:9091/product/yGoods/updateImage" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="addbScoreGoods">立即添加</el-button>
            <div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button @click="updataGoodsImageDialog = false">取 消</el-button>
          </span>
        </el-dialog>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Goods",
    data() {
      return {
        updataGoodsImageDialog: false, // 图片的窗口
        uploadData: {
          goodsId: null
        },
        add: {}, // 新增的对象
        showAddwindow: false, // 新增的窗口
        goodsId: "",
        page: {},
        goodsList: [],
        param: {
          pageNum: 1,
          pageSize: 3 // 每页显示3个商品
        }
      };
    },
    methods: {
      addbScoreGoods() {
        this.$refs.upload.submit();
        this.updataGoodsImageDialog = false;
        this.loadAllGoods();
      },
      updataGoodsImage(goodsId) {
        this.uploadData.goodsId = goodsId;
        this.updataGoodsImageDialog = true;
      },
      addGoods() {
        this.$http.post("product/yGoods/insert", this.add).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.showAddwindow = false;
          this.loadAllGoods();
        });
      },
      showDialog() {
        this.showAddwindow = true;
      },
      // 启用商品
      enabligoods(goodsId) {
        this.$http.get("/product/yGoods/enable", {
          params: {
            goodsId: goodsId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllGoods();
        });
      },
      // 禁用商品
      disablegoods(goodsId) {
        this.$http.get("/product/yGoods/disable", {
          params: {
            goodsId: goodsId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllGoods();
        });
      },
      // 分页
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllGoods();
      },
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllGoods();
      },
      // 分页查询
      loadAllGoods() {
        this.$http.get("/product/yGoods/loadPageGoods", {
          params: {
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize
          }
        }).then(resp => {
          this.page = resp.data.data;
          this.goodsList = this.page.records;
        });
      }
    },
    created() {
      this.loadAllGoods();
    }
  };
</script>

<style>
  #GoodsOrder2 {
    margin-left: -520px;
    line-height: 100%;
    width: 100%;
  }

  #GoodsOrder1 {
    line-height: 100%;
    width: 100%;
  }
</style>
